<?php
/**
 * Created by PhpStorm.
 * User: zhanglu
 * Date: 2019/2/19
 * Time: 1:19 PM
 */
$per_url = Yii::$app->params['imgurl'];
$this->registerCss("
    body{
       padding:0px;
       margin:0px;
       background:#fff;
    }
    .sec-one{display: flex;align-items: center;text-align: center;}
    .mytab{flex:1;display: block;color:#999;padding:15px;border-bottom:1px solid rgba(153, 153, 153, 0.3);}
    .mytab.active{flex:1;display: block;color:#333;border-bottom:1px solid #333}
    .book-item{padding:15px;border-bottom:1px solid rgba(153, 153, 153, 0.3);}
    .book-item .thumb{float:left;width:80px;}
    .book-item .mycontent{float:left;padding-left:20px;}
    .book-item .mycontent .title{font-size:16px;color:#333}
    .book-item .mycontent .desc{font-size:13px;font-weight:300;color:#333;text-align: justify;}
    .booklist a{text-decoration: none;}
    .sec-one a{text-decoration: none;}
");
$this->title = '排行榜';
?>

<div class="page-book-catalog">
    <header id="myheader" class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #333;"></a>
        <a href="#menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right" style="color: #333;"></a>
        <h1 class="mui-title"><?=$this->title?></h1>
    </header>
    <div style="width:100%;height:45px;"></div>
    <div class="sec-one">
        <a href="/touch/default/ranking-list?tab=mun" class="mytab <?=($tab == 'num')?'active':''?>">
            人气榜
        </a>
        <a href="/touch/default/ranking-list?tab=like" class="mytab <?=($tab == 'like')?'active':''?>">
            收藏榜
        </a>
    </div>

    <div class="booklist">
        <?php foreach($list as $k=>$v){?>
            <a href="/book-item/<?=$v['number']?>.html">
                <div class="book-item wow slideInRight" data-wow-duration="0.5s">
                    <div class="thumb">
                        <img src="<?=$per_url . $v['thumb_img']?>" alt="" style="width:100%;border-radius: 6px;box-shadow: 0 0 2px #999">
                    </div>
                    <div class="mycontent">
                        <h4 class="title"><?=$v['front_title']?></h4>
                        <p class="desc"><?=$v['intro']?></p>
                        <p class="remark" style="text-align: right;font-size: 12px;margin-top: 30px">
                            <span style="padding: 2px 6px;border:1px solid #ff5754;border-radius: 6px;color:#ff5754;margin-right: 15px;"><?=$v['click_num']?> 人气</span>
                            <span style="padding: 2px 6px;border:1px solid #333;border-radius: 6px;color:#333"><?=$v['zan_num']?> 收藏</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </a>
        <?php }?>
    </div>

</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
    var decviceWidth=$(window).width();
    var sw = decviceWidth - 110;
    $('.mycontent').css('width',sw + 'px');
</script>